<template>
	<view id="index-insure">
		<view class="content-insure">
			<view class="header">
				<view :class="['tab',tabType == obj.type?'tab-act':'']" @click="setTab(obj)" v-for="(obj) in tabArr" :key="obj.type">
					<view class="name">{{obj.name}}</view>
					<view class="after"></view>
				</view>
			</view>
			
			<view class="insure-ul">
				<view class="insure-li" v-for="(obj,i) in insureArr" :key="i"  @click="toDetail()">
					<image :src="obj.img" class="li-img" mode=""></image>
					<view class="li-row">
						<view class="h3">{{obj.title}}</view>
						<view class="h6">{{obj.tips}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabArr: [
				{name: '车险',type: 1},
				{name: '人险',type: 2},
				{name: '寿险',type: 3},
				{name: '意外险',type: 4},
			],
			tabType: 1,
			insureArr: [],
			carArr: [
				{
					img: '/static/icon/img_car_01.png',
					title: '车险',
					tips: '马路凶猛如虎口，车辆保障不可少'
				},
				{
					img: '/static/icon/img_car_01.png',
					title: '驾乘意外险',
					tips: '意外是无处不在，保障要随时随在'
				}
			],
			peopleArr: [
				{
					img: '/static/icon/img_car_04.png',
					title: '百万医疗险',
					tips: '600万保障，10万新冠保障金'
				},
				{
					img: '/static/icon/img_car_04.png',
					title: '重疾险',
					tips: '保障100种疾，50种轻疾'
				}
			],
			ageArr: [
				{
					img: '/static/icon/img_car_03.png',
					title: '守护家人寿险',
					tips: '保障因意外/疾病身故及全残'
				},
				{
					img: '/static/icon/img_car_03.png',
					title: '孝顺父母寿险',
					tips: '保障因意外/疾病身故父母受益'
				}
			],
			accidentArr: [
				{
					img: '/static/icon/img_car_02.png',
					title: '中老年意外险',
					tips: '80岁都能买，骨折伤残保障全'
				},
				{
					img: '/static/icon/img_car_02.png',
					title: '少儿意外险',
					tips: '意外/疫苗/监护人责任都可保'
				}
			],
		};
	},
	onLoad() {
		this.handleArr(this.tabType);
	},
	components: {

	},
	onShow() {

	},
	methods: {
		// 切换tab
		setTab(obj){
			this.tabType = obj.type;
			this.handleArr(this.tabType);
		},
		// 处理显示的列表
		handleArr(type){
			switch (type){
				case 1:
					this.insureArr = this.carArr
					break;
				case 2:
					this.insureArr = this.peopleArr
					break;
				case 3:
					this.insureArr = this.ageArr
					break;
				case 4:
					this.insureArr = this.accidentArr
					break;
				default:
					break;
			}
		},
		toDetail(){
			this.$api.msg('功能开发中')
		},
	}
};
</script>

<style>
	page {
		background: #F5F5F5;
	}
</style>

<style scoped lang="scss">
	.header {
		width: 100%;
		background: #fff;
		padding: 0px 60rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.tab {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 26rpx;
			height: 96rpx;
			.name {
				font-size: 32rpx;
				color: #7A7C80;
			}
			.after {
				margin-top: 24rpx;
				width: 80rpx;
				height: 4rpx;
				background: #EE486C;
				opacity: 0;
			}
		}
		.tab-act {
			.name {
				color: #EE486C;
			}
			.after {
				opacity: 1;
			}
		}
	}
	
	.insure-ul {
		.insure-li {
			width: 100%;
			margin-top: 20rpx;
			background: #fff;
			padding: 28rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			.li-img {
				width: 160rpx;
				height: 160rpx;
				display: block;
			}
			.li-row {
				margin-left: 28rpx;
				.h3 {
					font-size: 32rpx;
					font-weight: 600;
					color: #1D1E22;
					line-height: 44rpx;
					margin-bottom: 16rpx;
				}
				.h6 {
					font-size: 28rpx;
					color: #7A7C80;
					line-height: 40rpx;
				}
			}
		}
	}
	
</style>
